import { Meta, Canvas } from '@storybook/addon-docs';
import { IconUseInCanvas } from './examples/icon-in-canvas';
import { StarFilled } from '@apitable/icons';
import { StoryType } from './constants';

<Meta title={`en/components/Icons`} />

## Icons

## How to use

Import the required icons from the '@apitable/icons' library.

```jsx
import { StarFilled } from '@apitable/icons';
```

## Basic Examples

<Canvas>
    <StarFilled />
</Canvas>

## Color

<Canvas>
    <StarFilled color="rgb(123, 103, 238)" />
</Canvas>

## Size

<Canvas>
    <StarFilled color="rgb(123, 103, 238)" size={32} />
</Canvas>

## Inherit Parent Color

<Canvas>
  <span style={{ color: 'rgb(123, 103, 238)' }}>
    <StarFilled currentColor size={32} />
  </span>
</Canvas>


#### Canvas Support

The icon is formatted by the 'toString' method and becomes a graph drawn by Path. The icon is drawn in canvas.

```tsx
import React, { useEffect } from 'react';
import { StarFilled } from '@apitable/icons';

export const Icon2Canvas = () => {
  useEffect(()=>{
    const canvas = document.getElementById('canvas') as HTMLCanvasElement;
    if (canvas){
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'red';
      const p = new Path2D(StarFilled.toString());
      ctx.fill(p);
    }
  },[])
  return (
    <div>
      <StarFilled />
      <canvas id="canvas" height="50" style={{ backgroundColor: '#eee' }}/>
    </div>
  )
}
```

The effect is as follows:

<IconUseInCanvas />

### API Interface

| Name | Type | Required | Description | Default |
| --- | --- | --- | --- | --- |
| size | number \| string | true | icon size | 16px |
| color | string |  false | color | 16px
| currentColor| boolean | false | display the same color as the parent element |  |
| className | string | false | override style passed in className |  |

#### All Icons

<style>{`
  .icons-wrap {
    margin: 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
  }
  .icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 150px;
    height: 100px;
    margin: 0 12px 12px 0;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
  }

  .icon-name {
    font-size: 12px;
    color: #999;
  }
`}</style>

import * as Icons from '@apitable/icons';
const names = Object.keys(Icons);

<ul className="icons-wrap" >
    {
        names.map((iconName) => {
            const Icon = Icons[iconName];
            return <li className="icon-wrap" key={iconName}>
                <Icon size={60} />
                <span className="icon-name">{iconName}</span>
            </li>
        })
    }
</ul>